<template>
  <div id="app">
      <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
        <el-breadcrumb-item>通用优惠券</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- /面包屑导航栏 -->

    <!-- 卡片区域 -->
    <el-card class="box-card">
        <el-form class="demo-form-inline zhuti" inline :model="formin">
            <el-form-item label="优惠券:">
                <el-input placeholder="优惠券名称" v-model="formin.name"></el-input>
            </el-form-item>
             <el-form-item label="活动时间" class="flex2">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formin.data1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="1">至</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="formin.data2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="anniu">查询</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!-- /卡片区域 -->

    <!-- 操作栏 -->
    <div class="caozuo">
        <el-button type="primary" round @click="dialogVisible1 = true">新增优惠劵</el-button>
        <div >
            <span>发放总数量: {{zongtiaoshu}}张</span>
            <span class="caozuo-span">领取总金额:{{Math.floor(Math.random()*100*zongtiaoshu)}}元</span>
        </div>
    </div>
    <!-- /操作栏 -->

    <!-- 主体表格 -->
    <template>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
            align="center"
            prop="discounts_name"
            label="优惠券名称"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="discounts_price"
            label="优惠券金额/元"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="discounts_type"
            label="使用金额限制"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="end_time"
            label="使用时限/天"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="limit_amount"
            label="领取限制/张"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="provide_amount"
            label="发放总数量/张"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="sh_shop"
            label="领取金额/元"
            width="150">
            </el-table-column>
            <el-table-column
            align="center"
            prop="address"
            label="操作">
            <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="modifyEvent(scope.row.discounts_id )"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteEvent(scope.row.discounts_id )"></el-button>
            </template>
            </el-table-column>
        </el-table>
    </template>
    <!-- /主体表格 -->

    <!-- 分页器 -->
    <el-pagination
        class="fenye"
        background
        layout="prev, pager, next"
        :page-size="shuju.pageSize"
        :current-page="shuju.pageNum"
        @current-change="currentChange"
        :total="zongtiaoshu">
    </el-pagination>
    <!-- /分页器 -->

    <!-- 新增窗口 -->
    <el-dialog
    title="新增/编辑优惠券"
    :visible.sync="dialogVisible1"
    @close="qingchu"
    width="50%">
      <span>
        <el-form ref="form2" :model="form2" label-width="100px">
          <el-form-item label="优惠券名称:" prop="discounts_name">
            <el-input v-model="form2.discounts_name"></el-input>
          </el-form-item>
          <el-form-item label="优惠券金额:" prop="discounts_price">
            <el-input v-model="form2.discounts_price"></el-input>
          </el-form-item>
          <el-form-item label="金额限制:" prop="limit_amount">
            <el-input v-model="form2.limit_amount"></el-input>
          </el-form-item>
          <el-form-item label="使用时限:" prop="start_time">
            <el-input v-model="form2.start_time"></el-input>
          </el-form-item>
          <el-form-item label="领取上限:" prop="provide_amount">
            <el-input v-model="form2.provide_amount"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="newWindow">确 定</el-button>
      </span>
  </el-dialog>
    <!-- /新增窗口 -->

    <!-- 修改窗口 -->
    <el-dialog
    title="修改优惠券"
    :visible.sync="dialogVisible2"
    @close="qingchu"
    width="50%">
      <span>
        <el-form ref="form2" :model="modifyData" label-width="100px">
          <el-form-item label="优惠券名称:" prop="discounts_name">
            <el-input v-model="modifyData.discounts_name"></el-input>
          </el-form-item>
          <el-form-item label="优惠券金额:" prop="discounts_price">
            <el-input v-model="modifyData.discounts_price"></el-input>
          </el-form-item>
          <el-form-item label="金额限制:" prop="limit_amount">
            <el-input v-model="modifyData.limit_amount"></el-input>
          </el-form-item>
          <el-form-item label="使用时限:" prop="start_time">
            <el-input v-model="modifyData.start_time"></el-input>
          </el-form-item>
          <el-form-item label="领取上限:" prop="provide_amount">
            <el-input v-model="modifyData.provide_amount"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="xiugaishuju">确 定</el-button>
      </span>
  </el-dialog>
    <!-- /修改窗口 -->
  </div>
</template>

<script>
export default {

  data () {
    return {
      // 获取页面数据
      shuju: {
        pageNum: 1, // 页码
        pageSize: 5 // 每页条数
      },
      // 主体表格数据
      formin: {
        name: '',
        data1: '',
        data2: ''
      },
      tableData: [],
      zongtiaoshu: 0,
      // 控制新增窗口的开关
      dialogVisible1: false,
      // 新增表格数据
      form2: {
        discounts_name: '',
        discounts_price: undefined,
        limit_amount: '',
        start_time: '',
        provide_amount: ''
      },
      // 控制修改窗口的开关
      dialogVisible2: false,
      modifyData: {}
    }
  },
  created () {
    this.discount()
  },
  mounted () {

  },
  methods: {
    //   请求初始数据
    async discount () {
      const { data: res } = await this.$http.get('discounts', { params: this.shuju })
      if (res.meta.status !== 200) return this.$message.error('获取用户数据失败!')
      console.log(res)
      // 渲染页面数据
      this.tableData = res.data.rows
      // 更新总条数
      this.zongtiaoshu = res.data.count
    },

    // 分页器
    currentChange (index) {
      this.shuju.pageNum = index
      this.discount()
    },

    // 新增窗口
    async newWindow () {
      try {
        await this.$http.post('discounts', this.form2)
        this.$message.success('添加用户成功!')
        // 隐藏对话框
        this.dialogVisible1 = false
        // 更新列表
        this.discount()
      } catch (error) {
        this.$message.error('添加用户失败!')
      }
    },

    // 关闭时清除表单数据
    qingchu () {
      this.$refs.form2.resetFields()
    },

    // 根据ID来删除数据
    async deleteEvent (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      try {
        await this.$http.delete('discounts/' + id)
        this.$message.success('删除用户成功!')
        console.log(this.modifyData)
        this.discount()
      } catch (error) {
        this.$message.error('删除用户失败!')
      }
    },

    // 根据ID来修改数据
    // 1. 获取修改数据
    async modifyEvent (id) {
      try {
        const { data: res } = await this.$http.get('discounts/' + id)
        this.modifyData = res.data
        // 获取到数据后打开修改框
        this.dialogVisible2 = true
      } catch (error) {
        this.$message.error('查询数据失败!')
      }
    },

    // 2. 修改数据操作
    async xiugaishuju () {
      try {
        await this.$http.put('discounts/' + this.modifyData.discounts_id, {
          discounts_name: this.modifyData.discounts_name,
          discounts_price: this.modifyData.discounts_price
        })

        this.dialogVisible2 = false
        this.discount()
        this.$message.success('更新信息成功!')
      } catch (error) {
        this.$message.error('更新信息失败!')
      }
    }
  }
}
</script>

<style scoped lang="less">
.box-card{
    margin-top: 20px;
    margin-bottom: 20px;
}

.zhuti{
    display: flex;
}
/deep/ .el-form-item{
    flex: 1;
    text-align: center;
}

.flex2{
    flex: 2;
}

.anniu{
    margin-right: 50px;
}

.caozuo{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;

    .caozuo-span{
        margin-left: 80px;
    }
}

.juzhong{
    text-align: center;
}

.fenye{
    margin-top: 20px;
    text-align: center;
}

</style>
